import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import { Modal,UploadDragger } from 'ant-design-vue'
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons-vue'
// Modal 引入

@Component
export class UploadFilePop extends Render {
    fileList = [] 
    isModalShow = false
    @Prop({ default: false }) show!: boolean
    @Emit('update:show')
    showChange(val: boolean) {return val}
    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.isModalShow = this.show
    }
   @Watch('formConfig.show', { immediate: true })
    handleWatchShowDialog() {
        this.showChange(this.isModalShow)
    }
   
   
   render() {
       return <div>
           <Modal
               v-model:open={ this.isModalShow }
               title="上传附件"
           >
               <div>
                   <UploadDragger
                       v-model:fileList={ this.fileList }
                       name="file"
                       multiple={true}
                       showUploadList={ false }
                       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                       // @change="handleChange"
                       // @drop="handleDrop"
                   >
                       <div class="h-26 flex flex-col items-center justify-center">
                           <div>
                               <UploadOutlined  style="color:#3E5FF5; font-size:20px;"/>
                           </div>
                           <div class="text-black-100 text-base ">点击上传，或将文件拖动到此区域</div>
                       </div>
                   </UploadDragger>
                   <div class="text-black-300 text-sm mt-8">请根据模板提示完善内容，仅支持xls格式，限10MB以内，一次性最多上传1000条数据</div>
                   {/* 文件列表 */}
                   <div class="mt-12">文件列表</div>
                   <div class="mt-16 text-blue-100 text-base">
                       <DownloadOutlined style="color:#3E5FF5;" />
                       下载导入模板
                   </div>
               </div>

           </Modal>
       </div>
   }
}

export default toNative<{}, {refresh: () => void}>(UploadFilePop)